<!DOCTYPE html>
<html lang="en" xmlns:c="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>车辆违法记录</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
</head>
<body>
<div style="margin: 0 auto;width: 1200px">
    <h1 style="text-align: center;margin-top: 30px;font-weight: bold">车辆违法记录</h1>
    <form style="float: left;margin-top: 30px" action="selectRecord" method="post">
            车牌号<input type="text" name="RecordLicense" style="margin-right: 5px" size="10">
        违法开始时间<input type="date" name="beginTime"style="margin-right: 5px;height: 25px" size="10">
        违法结束时间<input type="date" name="endTime" style="margin-right: 5px;height: 25px" size="10">
        <input type="submit" value="查询">
    </form>

    <button style="float: right;margin-top: 30px; background-color: #1E90FF;font-size: 18px;color: white;border-radius: 25px;
    border-color:#1E90FF" class="edit addRecord" data-toggle="modal" data-target="#myModal1">添加违法记录</button>
    <div style="height: 60px"></div>
    <table class="layui-table">
        <tr>
            <th>序号</th>
            <th>违法时间</th>
            <th>车牌号</th>
            <th>车主姓名</th>
            <th>车主手机号码</th>
            <th>违法代码</th>
            <th>违法行为</th>
            <th>违法地点</th>
            <th>罚款</th>
            <th>记分</th>
            <th>状态</th>
            <th>操作</th>
        </tr>

        <tr th:each="record:${queryVO}" style="height: 30px">
<!--            序号-->
            <td  th:text="${record.illegalRecordId}"></td>
<!--            违法时间-->
            <td th:text="${record.illegalRecordTime}"></td>
<!--            车牌号-->
            <td th:text="${record.illegalRecordLicense}"></td>
<!--            车主姓名-->
            <td th:text="${record.userName}"></td>
<!--            车主手机号码-->
            <td th:text="${record.phone}"></td>
<!--            违法代码-->
            <td th:text="${record.illegalItemCode}"></td>
<!--            违法行为-->
            <td th:text="${record.illegalItemName}"></td>
<!--            违法地点-->
            <td th:text="${record.illegalRecordAddress}"></td>
<!--            罚款-->
            <td th:text="${record.illegalItemFine}"></td>
<!--            记分-->
            <td th:text="${record.illegalItemScore}"></td>
<!--            状态-->
            <td th:if="${record.illegalRecordStatus==0}">未处理</td>

            <td th:if="${record.illegalRecordStatus!=0}">待处理</td>

            <td th:if="${record.illegalRecordStatus==0}">
                <button data-toggle="modal" data-target="#myModal"  th:value="${record.userId}" name="recordId" class="userId" >编辑</button>
                <button style="margin-left: 5px" class="recordId1"  th:value="${record.illegalRecordId}" name="recordId"   >处理</button>
            </td>
            <td th:if="${record.illegalRecordStatus!=0}">
                <button disabled>编辑</button>
                <button style="margin-left: 5px" disabled>处理</button>
            </td>
        </tr>
    </table>
    <div th:if="${currentPage==0}" hidden style="text-align: center;margin: 10px auto 0;" >
        <a href="findAllRecordPage?currentPage=0"><button>首页</button></a>

        <a th:if="${currentPage==1}"><button disabled>上一页</button></a>
        <a th:href="@{findAllRecordPage?(currentPage=${currentPage-1})}" th:if="${currentPage!=1}"><button>上一页</button></a>

        <a th:if="${currentPage==totalPage}"><button disabled>下一页</button></a>

        <a th:href="@{findAllRecordPage?(currentPage=${currentPage+1})}" th:if="${currentPage<totalPage}"><button>下一页</button></a>

        <a th:href="@{findAllRecordPage?(currentPage=${totalPage})}"><button>尾页</button></a>
        <span>第<span th:text="${currentPage}"></span>页 /&nbsp;每页
            <span th:text="${count}"></span>条记录/&nbsp;共
            <span th:text="${totalPage}"></span>页/&nbsp;共<span th:text="${countSize}"></span>条记录</span>
    </div>

    <div  th:if="${currentPage !=0}" style="text-align: center;margin: 10px auto 0;" >
        <a href="findAllRecordPage?currentPage=0"><button>首页</button></a>

        <a th:if="${currentPage==1}"><button disabled>上一页</button></a>
        <a th:href="@{findAllRecordPage?(currentPage=${currentPage-1})}" th:if="${currentPage!=1}"><button>上一页</button></a>

        <a th:if="${currentPage==totalPage}"><button disabled>下一页</button></a>

        <a th:href="@{findAllRecordPage?(currentPage=${currentPage+1})}" th:if="${currentPage<totalPage}"><button>下一页</button></a>

        <a th:href="@{findAllRecordPage?(currentPage=${totalPage})}"><button>尾页</button></a>
        <span>第<span th:text="${currentPage}"></span>页/ &nbsp;每页
            <span th:text="${count}"></span>条记录/&nbsp;共
            <span th:text="${totalPage}"></span>页/&nbsp;&nbsp;&nbsp;共<span th:text="${countSize}"></span>条记录</span>
    </div>

<!--    添加违法记录-->

    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="UpdateIllegalItem" method="post">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title " id="myModalLabel1">添加违法记录</h4>
                    </div>
                    <div class="modal-body">
                        <table align="center">
                            <tr>
                                <td style="height: 30px;margin-top: 15px;width: 100px"><h4 style="margin-top: 15px">违法时间:</h4></td>
                                <td><input style="height: 30px;width: 200px;margin-top: 10px" type="date" name="illegalRecordTime" id="time"><br></td>
                            </tr>
                            <tr>
                                <td style="height: 30px;margin-top: 15px;width: 100px"><h4 style="margin-top: 15px">车主姓名:</h4></td>
                                <td>
                                    <select id="user" style="width: 200px;height: 35px" onchange="getId()" name="userName">
                                        <option value="no">请选择..</option>
                                    </select><br>
                                </td>
                            </tr>
                            <tr >
                                <td style="height: 30px"><h4 style="margin-top: 15px">车牌号:</h4></td>
                                <td> <input style="height: 30px;width: 200px;margin-top: 10px" type="text" name="illegalRecordLicense" id="recordCard">
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 30px"><h4 style="margin-top: 15px">手机号码:</h4></td>
                                <td ><input style="height: 30px;width: 200px;margin-top: 10px" type="text" name="phone" id="userTel" readonly></td>
                                <td ><input style="height: 30px;width: 200px;margin-top: 10px" type="text" name="userId" id="userId" hidden></td>
                            </tr>
                            <tr >
                                <td style="height: 30px"><h4 style="margin-top: 15px">违法代码:</h4></td>
                                <td>
                                    <select id="act" style="width: 200px;height: 35px" onchange="getItemId()" name="itemAct">
                                        <option value="no">请选择..</option>
                                    </select>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 30px"><h4 style="margin-top: 15px">违法行为:</h4></td>
                                <td> <input style="height: 30px;width: 200px;margin-top: 10px" type="text" name="illegalItemName" id="itemName" readonly></td>
                                <td> <input style="height: 30px;width: 200px;margin-top: 10px" type="text" name="illegalItemId" id="itemId" hidden></td>
                            </tr>
                            <tr>
                                <td style="height: 30px"><h4 style="margin-top: 15px">罚款:</h4></td>
                                <td> <input style="height: 30px;width: 200px;margin-top: 10px" type="text" name="illegalItemFine" id="itemFee" readonly></td>
                            </tr>
                            <tr>
                                <td style="height: 30px"><h4 style="margin-top: 15px">记分:</h4></td>
                                <td> <input style="height: 30px;width: 200px;margin-top: 10px" type="text" name="illegalItemScore" id="itemScore" readonly></td>
                            </tr>
                            <tr>
                                <td style="height: 30px"><h4 style="margin-top: 15px">违法地点:</h4></td>
                                <td> <input style="height: 30px;width: 200px;margin-top: 10px" type="text" name="illegalRecordAddress"></td>
                            </tr>
                            <tr>
                                <td style="height: 30px"><h4 style="margin-top: 15px">状态:</h4></td>
                                <td> <input style="height: 30px;width: 200px;margin-top: 10px" type="text" name="illegalRecordStatus" value="待处理"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--    编辑违法记录-->

</div>
</body>
<script>

    window.onload=function () {
        $.ajax({
            type: "POST",
            url: "findAllUsername",
            success:function(data) {

                for (var i=0;i<data.length;i++){
                    $("#user").append("<option value='" + data[i].userId + "'>" +data[i].userName+ "</option>")
                }
            }

        })

        $.ajax({
            type:"POST",
            url:"findAllIllegalItem",
            success:function (data) {
                console.log(data)
                for (var i=0;i<data.length;i++){
                    $("#act").append("<option value = '" +data[i].illegalItemCode +"'>" +data[i].illegalItemCode+ "</option>" )
                }
            }
        })
    }


    function getId() {
        var v1 = $("#user").val();
        var url = "findRecordLicenseByUserId";
        $.get(url,{UserId:v1},
            function(data){
            //偷个懒只有一条数据就不写循环啦
            $("#userTel").val(data[0].phone);
            $("#userId").val(data[0].illegalRecordId);
            $("#recordCard").val(data[0].illegalRecordLicense);
            })//以ajax方法提交，后台只需显示出这个结果，自然即可返回这个结果。或
        // window.location.href="selectByUserId?userId="+v1;//此方法将以get方法转向到get.php，后台接收str变量即可。
    };

    function getItemId() {
        var v1 = $("#act").val();
        var url = "findAllIllegalItemByCode";
        $.get(url,{illegalItemCode:v1},function(data){
            console.log(data);
            //同上只有一条数据不循环
            $("#itemName").val(data[0].illegalItemName)
            $("#itemFee").val(data[0].illegalItemFine)
            $("#itemScore").val(data[0].illegalItemScore)
            $("#itemId").val(data[0].illegalItemId)
        })
    }
    $(".recordId1").click(function(){
        location.href="updateIllegalRecordStatus?illegalRecordId="+$(this).val();
    })

    $(".sendMassag").click(function () {
        $.ajax({
            type:"POST",
            url:"test04",
            success:function (data) {
              if (data==2){
                  alert("一禅小和尚短信发送成功！【互忆无线！！！！！！】");
              }
            }
        })
    })


</script>
</html>